<template>
    <div>
        <el-dialog :title="info.isAdd ? '活动添加' : '活动编辑'" :visible.sync="info.isshow" @closed="closed">
            <div>form:{{ form }}</div>
            <div>time:{{ time }}</div>
            <el-form :model="form">
                <!-- 活动名称 -->
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>

                <!-- 活动期限 -->
                <el-form-item label="活动期限" :label-width="formLabelWidth">
                    <div class="block" v-if="info.isshow">
                        <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" @change="getTime">
                        </el-date-picker>
                    </div>
                </el-form-item>

                <!-- 一级分类 -->
                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.first_cateid" placeholder="请选择" @change="oneClassify">
                        <!-- 遍历list -->
                        <el-option v-for="item in list" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 二级分类 -->
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.second_cateid" placeholder="请选择" @change="towClassify">
                        <!-- 遍历list -->
                        <el-option v-for="item in twoArr" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 商品 -->
                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="form.goodsid" placeholder="请选择">
                        <!-- 遍历list -->
                        <el-option v-for="item in shopArr" :key="item.id" :label="item.goodsname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" v-if="info.isAdd" @click="add">添加</el-button>
                <el-button type="primary" v-else @click="edit">修改</el-button>
            </div>
        </el-dialog>  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { reqseckadd, reqseckinfo, reqcateedit, reqcatelist, reqgoodslist } from "../../../http/api"
import { errorAlert, successAlert } from "../../../utils/alert"
import path from "path";
import { time } from 'echarts';

export default {
    props: ["info"],
    data() {
        return {
            form: {
                title: "",//限时秒杀名称
                begintime: "",//开始时间
                endtime: "",//结束时间
                first_cateid: "",//商品一级分类编号
                second_cateid: "",//商品二级分类编号
                goodsid: "",//商品编号
                status: 1,
            },
            //时间
            time: [],
            formLabelWidth: "120px",
            //二级分类
            twoArr: [],
            //商品列表
            shopArr: [],
        }
    },
    computed: {
        ...mapGetters({
            list: "cate/list",
            goodsList: "goods/list"
        }),
    },
    mounted() {
        this.reqList()
    },
    methods: {
        ...mapActions({
            reqList: "cate/reqList",
            reqGoodsList: "goods/reqList",
            reqSeckillList: "seckill/reqList"
        }),

        checkDate() {
            return new Promise((resolve, rejeck) => {
                if (this.form.pid === "") {
                    errorAlert("上级分类不能为空")
                    return;
                }
                if (this.form.catename === "") {
                    errorAlert("分类名称不能为空")
                    return
                }
                resolve();
            })
        },

        //选了文件
        changeFile(e) {
            let file = e.target.files[0]
            //判断大小
            if (file.size > 2 * 1024 * 1024) {
                errorAlert("最大支持2M")
                return;
            }
        },
        //清空表单的数据
        empty() {
            this.form = {
                title: "",//限时秒杀名称
                begintime: "",//开始时间
                endtime: "",//结束时间
                first_cateid: "",//商品一级分类编号
                second_cateid: "",//商品二级分类编号
                goodsid: "",//商品编号
                status: 1,
            },
                //时间
                this.time = [],
                //二级分类
                this.twoArr = [],
                //商品列表
                this.shopArr = []
        },
        //点了添加
        add() {
            //添加验证先
            this.checkDate().then(() => {
                reqseckadd(this.form).then(res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        //弹窗成功
                        successAlert(res.data.msg);
                        //调用empty清空表单内容
                        this.empty();
                        //关闭弹框
                        this.info.isshow = false;
                        //刷新列表
                        this.reqSeckillList()
                        this.oneClassify2()
                    }
                })
            })
        },
        //点了取消
        cancel() {
            this.info.isshow = false
        },
        //编辑渲染页面
        getOne(id) {

            reqseckinfo({ id: id }).then(res => {
                if (res.data.code == 200) {
                    //赋值给form
                    this.form = res.data.list
                    let time1 = new Date(Number(this.form.begintime))
                    let time2 = new Date(Number(this.form.endtime))
                    this.time = [time1, time2]
                    this.form.id = id
                    this.onclass()
                    this.oneClassify2()
                    //根据一级分类id
                    // this.oneClassify()

                }
            })
        },
        //修改
        edit() {
            this.checkDate().then(() => {
                reqcateedit(this.form).then(res => {
                    if (res.data.code == 200) {
                        //成功弹窗
                        successAlert(res.data.msg);
                        //清除数据表单
                        this.empty();
                        //关闭窗口
                        this.info.isshow = false
                        //刷新页面
                        this.reqList()
                    }
                })
            })
        },
        //弹框关闭
        closed() {
            if (this.info.isAdd == false) {
                this.empty()
            }
        },
        //点了时间赋值给开始时间和结束时间
        getTime() {
            // let time1=this.time.join(",")
            console.log(this.time);
            let time1 = Date.parse(this.time[0])//开始时间
            let time2 = Date.parse(this.time[1])//结束时间
            this.form.begintime = time1
            this.form.endtime = time2

        },
        //一级分类出现二级分类
        oneClassify() {
            //清除二级分类
            this.form.second_cateid = ""
            //清除商品列表
            this.form.goodsid = ""
            this.onclass()
        },
        async onclass() {
            let res = await reqcatelist({ pid: this.form.first_cateid })
            if (res.data.code == 200) {

                //二级分类数组
                this.twoArr = res.data.list
                console.log(res);
            }
        },
        //二级分类出现商品
        towClassify() {
            /*     
                用接口的方式
                 reqgoodslist({fid:this.first_cateid,sid:this.first_cateid}).then(res=>{
                     console.log(res);
                 }) */
            //清除数据
            this.form.goodsid = ""
            this.oneClassify2()
        },
        oneClassify2() {
            reqgoodslist().then(res => {
                let obj = res.data.list.filter((item) => item.second_cateid == this.form.second_cateid)
                this.shopArr = obj
            })
        }
    }
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";

.my-upload {
    width: 100px;
    height: 100px;
    border: 1px dotted @primary;
    border-radius: 3%;
    position: relative;

    .plus {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 100px;
    }

    .ipt {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        opacity: 0;
        z-index: 10;
        cursor: pointer;
    }

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
    }
}
</style>